<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>结构性伪类选择符 E:first-child</title>
		<style>
			p:first-child{color:#f00;}
		</style>
	</head>
	<body>
		<div id="A">
			<h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4>
			<p>我是父亲的第2个子元素</p>
			<p>我是父亲的第3个子元素</p>
			<p>我是父亲的第4个子元素</p>
			<p>我是父亲的第5个子元素</p>
		</div>
		
		<hr />
		
		<div id="B">
			<p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p>
			<p>我是父亲的第2个子元素</p>
			<p>我是父亲的第3个子元素</p>
			<p>我是父亲的第4个子元素</p>
			<p>我是父亲的第5个子元素</p>
		</div>
		
		
	
	<!--
		注意：
			1、写法是  p:first-child，而不是div:first-child  
			2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种
			
			
		该选择器的匹配步骤：
		1、找到页面中的p元素	(任何标签内部第一个出现p元素)
		2、找到该p元素的父亲元素 (找到div元素  一个是id为A的 一个是id为B的)
		3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。
			(找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p)
			id为A的div第1个子元素不是p标签：无法选中第一个子元素
			id为B的div第1个子元素是p标签:	选中第一个子元素，定义颜色的样式对其生效
	-->
	</body>
</html>
			